<?php echo \think\facade\View::fetch("public/header"); ?>

<div class="cl-cantainer container">
    <div class="row">
        <div class="col-md-9 cl-left">

            <div class="cl-card" v-for="item in articleList">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-12 cl-card-image" v-if="item.cover_image">
                        <a v-bind:href="'/index/article/detail/article_id/'+item.article_id+'/'">
                            <img v-bind:src="item.cover_image" class="img-fluid" alt="">
                        </a>
                    </div>
                    <div class="col-lg-9 col-md-8 col-sm-12 cl-card-main">
                        <h3 class="cl-card-main-title">
                            <a v-bind:href="'/index/article/detail/article_id/'+item.article_id+'/'">
                                {{ item.article_title }}
                            </a>
                        </h3>
                        <p class="cl-card-main-info">{{ item.intro }}</p>
                        <p class="cl-card-more">
                            <a v-bind:href="'/index/article/detail/article_id/'+item.article_id+'/'">
                                阅读更多...
                            </a>
                        </p>
                    </div>
                </div>
            </div>

            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-center">
                    <li class="page-item" :class="{disabled: paginator.page==1}">
                        <a class="page-link"
                           aria-label="Previous"
                           :href="'#page='+(paginator.page-1)"
                           @click="getArticleList(paginator.page-1)"
                        >
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </li>

                    <li v-for="item in paginator.pages"
                        class="page-item"
                        :class="{active:paginator.page==item}"
                        @click="getArticleList(item)"
                    ><a class="page-link" :href="'#page='+item">{{ item }}</a>
                    </li>

                    <li class="page-item" :class="{disabled: paginator.page==paginator.totalPage}">
                        <a class="page-link" :href="'#page='+(paginator.page+1)" aria-label="Next"
                           @click="getArticleList(paginator.page+1)"
                        >
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Next</span>
                        </a>
                    </li>
                </ul>
            </nav>

        </div>

        <?php echo \think\facade\View::fetch("public/right"); ?>

    </div>

</div>

<?php echo \think\facade\View::fetch("public/footer"); ?>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let app = new Vue({
            el: "#app",
            data: {
                page: 1,
                page_size: 3,
                total: 0,
                categoryList: [],
                articleList: []
            },
            created: function () { // 表示的时候vue初始化会执行这个方法。
                let _this = this;

                axios.get('/api/category/list')
                    .then(function (response) {
                        if (response.data.status == 0) { // 服务端成功处理
                            app.categoryList = response.data.data.categoryList;
                        } else {
                            alert("获取分类列表失败，具体信息：" + response.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

                this.getArticleList(this.page);
            }
            ,
            methods: {
                getArticleList: function (page) {
                    let _this = this;

                    axios.get('/api/article/list/', {
                        params: {
                            page: page,
                            page_size: _this.page_size
                        }
                    })
                        .then(function (response) {
                            if (response.data.status == 0) { // 服务端成功处理
                                app.page = page;
                                app.articleList = response.data.data.articleList;
                                app.total =  response.data.data.total;
                            } else {
                                alert("获取文章列表失败，具体信息：" + response.data.message);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
            watch: {
                page: function (newValue, oldValue) {
                    this.getArticleList(this.page);
                }
            },
            computed: {
                paginator: function () {
                    //  当前页，  每页显示几条记录， 总条目数
                    let result = {
                        range: 2, // 页码每边显示几条
                        page: this.page, //  当前页
                        page_size: this.page_size, // 每页显示几条记录
                        total: this.total, // 总条目数
                        pages: [] // 要显示的页码列表
                    };
                    result.count = result.range * 2 + 1; // 总的显示的分页数
                    result.totalPage = Math.ceil(result.total / result.page_size); // 总页码数

                    let temp = result.totalPage - result.page;
                    let start = Math.max(1, (temp < 2) ? (result.page - (result.count - 1) + temp) : result.page - 2);
                    let end = Math.min(result.page + (result.count - 1), result.totalPage);
                    for (let i = start; i <= end; i++) {
                        result.pages.push(i);
                        if (result.pages.length >= result.count) {
                            break;
                        }
                    }
                    console.log(result);

                    return result;
                }
            },
            filters: {}
        })
    ;


</script>
